<template>
    <div class="app-container">
        <el-form class="lookForm" :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="140px">
            <el-form-item label="学号" prop="stuNo">
                <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="学生姓名" prop="stuName">
                <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设岗部门" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="指导老师姓名" prop="zdlsName">
                <el-input v-model="queryParams.zdlsName" placeholder="请输入指导老师姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="申请时间" prop="applyTime">
                <el-date-picker clearable v-model="queryParams.applyTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择申请时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableData">
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="学号" align="center" prop="stuNo" />

            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="性别" align="center" prop="gender" />
            <el-table-column label="班级" align="center" prop="className" />
            <el-table-column label="指导老师" align="center" prop="zdlsName" />

            <el-table-column label="岗位名称" align="center" prop="postName" />
            <el-table-column label="设岗部门" align="center" prop="deptName" />
            <el-table-column label="审核状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.qgzx_stu_post_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>

            <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="lookVClick(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>



        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />



        <el-dialog title="审核" :visible.sync="lookV" append-to-body fullscreen>
            <el-steps :active="getStep(applyForm)">
                <el-step title="学生申请入驻岗位" description=""></el-step>

                <el-step title="辅导员审批" :status="isEmpty(applyForm.fdyCmt) ? 'wait' : getStepStatus(applyForm.fdyCmt)"
                    :description="isEmpty(applyForm.fdyCmt) ? '' : applyForm.fdyCmt"></el-step>

                <el-step title="指导老师审批" :status="isEmpty(applyForm.zdlsCmt) ? 'wait' : getStepStatus(applyForm.zdlsCmt)"
                    :description="isEmpty(applyForm.zdlsCmt) ? '' : applyForm.zdlsCmt"></el-step>

                <el-step title="资助办领导审批" :status="isEmpty(applyForm.zzbCmt) ? 'wait' : getStepStatus(applyForm.zzbCmt)"
                    :description="isEmpty(applyForm.zzbCmt) ? '' : applyForm.zzbCmt"></el-step>
            </el-steps>
            <hr />
            <div style="background-color: rgb(250,250,250);">
                <el-form class="lookForm" size="mini" ref="auditForm" label-width="148px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="审核意见">
                                <el-radio-group v-model="auditForm.zdlsCmt">
                                    <el-radio :label="'通过'">通过</el-radio>
                                    <el-radio :label="'不通过'">不通过</el-radio>
                                    <el-radio :label="'驳回'">驳回</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="指导老师签章">
                                <el-upload :limit="1" class="avatar-uploader" :action="upload.url"
                                    :headers="upload.headers" :file-list="upload.fileList" :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                    <img v-if="auditForm.zdlsSign" :src="baseurl + auditForm.zdlsSign" width="200px"
                                        height="50px" class="avatar">
                                    <span v-else> 点击上传</span>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-button @click="doAudit" size="mini" type="success" plain>审核</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <hr />
                <el-form class="lookForm" size="mini" ref="applyForm" label-width="148px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="学号">
                                {{ applyForm.stuNo }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="姓名">
                                {{ applyForm.stuName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="性别">
                                {{ applyForm.gender }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属学院">
                                {{ applyForm.stuDept }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="班级">
                                {{ applyForm.className }}
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="8">
                            <el-form-item label="宿舍">
                                {{ applyForm.stuDorm }}
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8">
                            <el-form-item label="身份证号">
                                {{ applyForm.idCard }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="农行卡号">
                                {{ applyForm.bankCard }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="开户行">
                                {{ applyForm.bankAddr }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="联系电话">
                                {{ applyForm.stuPhone }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="课余时间(单位：小时)">
                                {{ applyForm.canTime }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="家庭地址">
                                {{ applyForm.familyAddr }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="宿舍">
                                {{ applyForm.stuDorm }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="家庭经济情况">
                                {{ applyForm.familyCondition }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="曾获得资助">
                                {{ applyForm.helpHis }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请原因">
                                {{ applyForm.applyReason }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请附件">
                                <div v-if="!isEmpty(applyForm.applyMaterial)">
                                    <span style="margin-right: 10px;"
                                        v-for="(v, i) in applyForm.applyMaterial.split(',')" :key="i">
                                        <a style="text-decoration: underline; color: blue;" :href="baseurl + v"
                                            :download="v.split('/').pop()">{{ v.split("/").pop() }}</a>
                                    </span>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="申请人签字">
                                <img v-if="applyForm.applySign" :src="baseurl + applyForm.applySign" width="200px"
                                    height="50px" class="avatar">
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
                <hr />
                <el-form class="lookForm" size="mini" ref="lookForm" label-width="148px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="岗位名称" prop="postName">
                                <el-input v-model="lookForm.postName" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="设岗部门" prop="deptId">
                                <el-input v-model="lookForm.deptName" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="设岗人数" prop="postCount">
                                <el-input v-model="lookForm.postCount" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="负责人" prop="fzrName">
                                <el-input v-model="lookForm.fzrName" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="指导老师" prop="zdlsName">
                                <el-input v-model="lookForm.zdlsName" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="联系电话" prop="zdlsPhone">
                                <el-input v-model="lookForm.zdlsPhone" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="付酬方式">
                                <el-input value="按小时" disabled />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="付酬标准">
                                <el-input value="15.00" disabled />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="预计金额(元/月/人)" prop="willMoney">
                                <el-input v-model="lookForm.willMoney" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="预计金额合计(元/月)" prop="willMoneyTotal">
                                <el-input readonly v-model="lookForm.willMoneyTotal" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="岗位职责" prop="workNeed">
                                <el-input type="textarea" v-model="lookForm.workNeed" readonly />
                            </el-form-item>
                        </el-col>


                        <el-col :span="24">
                            <el-form-item label="技能要求" prop="skillNeed">
                                <el-input type="textarea" v-model="lookForm.skillNeed" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="每周工作时长" prop="weekTime">
                                <el-input v-model="lookForm.weekTime" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="校区" prop="campusName">
                                <el-input v-model="lookForm.campusName" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="16">
                            <el-form-item label="工作地点" prop="workAddr">
                                <el-input v-model="lookForm.workAddr" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="岗位类型" prop="postType">
                                <el-input v-model="lookForm.postType" readonly />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="lookForm.remark" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-dialog>

    </div>
</template>
<script>

import { getOwnSign, stuGetPost } from "@/api/workstudy/post";
import { doAudit, listZdls as getList } from "@/api/workstudy/stuPost";

import { CheckImgExists, fullLoading, isEmpty } from "@/api/helpFunc";
import { getToken } from "@/utils/auth";

export default {
    name: "workstudy-StuPost-zdls",
    dicts: ['qgzx_stu_post_status'],
    data() {
        return {
            isEmpty,
            loading: false,

            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null
            },


            editV: false,
            lookForm: {},
            applyForm: {},

            upload: {
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload",
                fileList: []
            },
            baseurl: process.env.VUE_APP_BASE_API + "/",

            lookV: false,

            auditForm: {
                id: null,
                zdlsCmt: null,
                zdlsSign: null
            },
        }
    },
    created() {
        this.getList();
    },
    methods: {
        //此方法用于判断步骤条当前步骤的状态
        getStepStatus(data) {
            if (data == "通过") {
                return 'success';
            } else {
                return 'error';
            }
        },

        //此方法用于判断步骤条到哪个步骤了
        getStep(data) {
            if (!isEmpty(data.zzbCmt)) { //判断资助办领导有没有审批
                return 4;
            } else if (!isEmpty(data.zdlsCmt)) { //判断指导老师有没有审批
                return 3;
            } else if (!isEmpty(data.fdyCmt)) { //判断辅导员有没有审批
                return 2;
            } else {
                return 1;
            }
        },
        
        async doAudit() {
            let sdata = { ...this.auditForm };
            sdata.auditType = 1
            if (isEmpty(sdata.zdlsCmt)) {
                this.$message.info("请选择是否通过");
                return;
            }

            if (isEmpty(sdata.zdlsSign)) {
                this.$message.info("请上传签章");
                return;
            }

            if (!CheckImgExists(this.baseurl + sdata.zdlsSign)) {
                this.$message.info("签名失效，请重新上传");
                return;
            }

            if (sdata.zdlsCmt == "驳回") {
                this.$prompt('请输入驳回原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请填写'
                }).then(async ({ value }) => {
                    sdata.returnMsg = value;

                    let loading = fullLoading(this);
                    let res = await doAudit(sdata);
                    loading.close();
                    if (res.code == 200) {
                        this.getList();
                        this.$message.success(res.msg);
                        this.lookV = false;
                    }

                }).catch(() => {

                });
            } else {

                let loading = fullLoading(this);
                let res = await doAudit(sdata);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                    this.lookV = false;
                }
            }


        },
        async lookVClick(row) {

            let loading1 = fullLoading(this);
            let res1 = await getOwnSign();
            loading1.close();
            if (res1.code == 200) {
                let data = { ...res1.data };
                if (isEmpty(data.signature)) {
                    this.$confirm('您的签名尚未上传', '提示', {
                        confirmButtonText: '点我前往',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push("/user/profile")
                    }).catch(() => {

                    });
                } else {
                    this.applyForm = {};
                    this.lookForm = {};
                    this.applyForm = { ...row };
                    let loading = fullLoading(this);
                    let res = await stuGetPost(row.postId);
                    loading.close();
                    if (res.code == 200) {
                        this.lookForm = { ...res.data };
                        this.auditForm.id = this.applyForm.id;
                        this.auditForm.zdlsSign = data.signature;
                        this.lookForm.deptName = row.deptName;
                        this.lookForm.zdlsName = row.zdlsName; //指导老师姓名

                        this.lookV = true;
                    }
                }
            }

        },


        handleAvatarSuccess(response, file, fileList) {
            this.auditForm.zdlsSign = response.fileName;
            this.upload.fileList = [];
            this.$forceUpdate();
        },


        async getList() {
            this.loading = true;
            let res = await getList(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
}



</script>


<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>